
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:numberpicker/numberpicker.dart';

typedef void DismissView();
typedef void CallBack(dynamic date);

class CustomDateView extends StatefulWidget {

  DismissView dismissView;
  CallBack   callBack;
  CustomDateView({this.dismissView,this.callBack});
  @override
  _CustomDateViewState createState() => _CustomDateViewState();
}

class _CustomDateViewState extends State<CustomDateView> {

  var _months = new List();
  ///选中的月份
  var _selectedMonth;
  ///当前选中年份
  int _seleYear = DateTime.now().year;
  ///最下年份
  int _minYear = 2000;
  ///最大年份
  int _maxYear = DateTime.now().year;
  ///当前年份
  int _currentYear;
  ///是否点击了年
  bool _isSelectYear = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    ///1~12 月
    _months = [
      "1","2","3",
      "4","5","6",
      "7","8","9",
      "10","11","12",
    ];

  }
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black12,
      child: Center(
        child: Stack(
          children: <Widget>[
            Container(
              height: 446,
              width: 294,
              color: Colors.red,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  _topView(),
                  _showMonthsView(),
                  Expanded(
                    flex: 1,
                    child: _bottomView(),
                  ),
                ],
              ),
            ),
            ///显示年份
            Offstage(
              offstage: !_isSelectYear,
              child: Padding(
                padding: const EdgeInsets.fromLTRB(0, 100, 0, 50),
                child: Container(
                  color: Colors.white,
                  height: 446-100.0 - 52,
                  width: 294,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      NumberPicker(
                          value: _seleYear,
                          minValue: _minYear,
                          maxValue: _maxYear,
                          onChanged: (n) {
                            _numChanged(n);
                          }),

                    ],
                  )
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
  ///选择器变化时
  void _numChanged(int newNum) {

    setState(() {
      _seleYear = newNum;
    });
    // 延时1s执行返回
    Future.delayed(Duration(seconds: 1), (){
      setState(() {
        _seleYear = newNum;
        _isSelectYear = false;

      });
    });

  }
  ///topView  显示 年月
  _topView(){
    return Container(
      color: Colors.blueAccent,
      height: 100,
      child: Column(
//        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 30),
                child: InkWell(
                  onTap: () {
                    setState(() {
                      _isSelectYear = true;
                    });
                  },
                  child: Container(
                    child: Text(
                      ///默认 显示 当前年份
                      _seleYear == null ? DateTime.now().year.toString() + "年" : _seleYear.toString() + "年",
                      style: TextStyle(fontSize: 17, color: Colors.white,height: 1),),
                    width: 100,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(right: 10),
                child: IconButton(
                    icon: Icon(Icons.delete, color: _isSelectYear == true ? Colors.blue :Colors.white,),

                    onPressed: _isSelectYear == true ? null : () =>  _deleteDate()),
              )
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(left: 30),
            child: Container(
              ///默认 显示 当前月份
              child: Text(_selectedMonth==null ? DateTime.now().month.toString()+"月" : _selectedMonth+"月",
              style: TextStyle(fontSize: 40, color: Colors.white,fontWeight: FontWeight.bold,height: 1),),),
          )
        ],
      ),
    );
  }
  ///显示月份
  _showMonthsView() {
    return Container(
      width: 294,
      height: 294,
      color: Colors.white,
      child: GridView.builder(
        padding: EdgeInsets.fromLTRB(30, 30, 30, 10),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, //每行三列
              childAspectRatio: 1.80 ,//显示区域宽高相等
              mainAxisSpacing: 20,
            crossAxisSpacing: 20
          ),
          itemCount: _months.length,
          itemBuilder: (context, index) {
            return FlatButton(
              onPressed: (){
                setState(() {
                  _selectedMonth = _months[index];
                });
              },
              color: _selectedMonth == _months[index] ? Colors.blue : Colors.white,
              highlightColor: Colors.blue,
              colorBrightness: Brightness.light,
//              splashColor: Colors.grey,
              child: Text(_months[index]+"月", style: TextStyle(fontSize: 15),),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
            );
          }
      ),
    );
  }

  ///bottomView 确定取消
  _bottomView() {
    return Container(
      color: Colors.white,
      child: Column(
        children: <Widget>[

          Offstage(
            offstage: !_isSelectYear,
              child: Divider(color: Colors.black26,height: 1,)
          ),

          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              FlatButton(
                  onPressed: (){
                   widget.dismissView();
                  },
                  splashColor: Colors.grey,
                  highlightColor: Colors.white,
                  child: Text("取消", style: TextStyle(fontSize: 15, color: Colors.blue),)
              ),
              FlatButton(
                  onPressed: (){
                    ///如果删除了 月份 传过去 为 null
                    widget.callBack(
                      _selectedMonth == null ? null :
                        _seleYear.toString() + "-" +_selectedMonth
                    );
                    widget.dismissView();
                  },
                  child: Text("确定", style: TextStyle(fontSize: 15, color: Colors.blue),)
              ),
            ],
          ),
        ],
      )
    );
  }
  ///显示年的时候的bottomView
//  _bottomView_Year() {
//    return Container(
//        color: Colors.white,
//        child: Column(
//          children: <Widget>[
//            Divider(color: Colors.black26,height: 1,),
//            Row(
//              mainAxisAlignment: MainAxisAlignment.end,
//              children: <Widget>[
//
//                FlatButton(
//                    onPressed: (){
//                      setState(() {
//                        _isSelectYear = false;
//                      });
//                    },
//                    splashColor: Colors.grey,
//                    highlightColor: Colors.white,
//                    child: Text("取消", style: TextStyle(fontSize: 15, color: Colors.blue),)
//                ),
//                FlatButton(
//                    onPressed: (){
//                      setState(() {
//                        _isSelectYear = false;
//                      });
//                    },
//                    child: Text("确定", style: TextStyle(fontSize: 15, color: Colors.blue),)
//                ),
//              ],
//            ),
//          ],
//        )
//    );
//  }
  ///删除所选日期
  _deleteDate() {
    print("删除日期");
    setState(() {
      _selectedMonth = null;
    });
    ///如果删除了 月份 传过去 为 null
    widget.callBack(
        _selectedMonth == null ? null :
        _seleYear.toString() + "-" +_selectedMonth
    );
    widget.dismissView();
  }
}


